<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>table模块快速使用</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/viewer/viewer.css}"/>

    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/layui/layui.js}"></script>
    <script th:src="@{/static/layui/wk.js}"></script>
    <script th:src="@{/static/viewer/viewer.js}"></script>

</head>

<body>

<div>
    <div class="layui-form layui-form-pane" style="margin: 5px">

        <button class="layui-btn" th:id="add" lay-even="add">添加</button>
        <!--<button class="layui-btn layui-btn-danger" data-type="dels">批量删除</button>-->

        <div class="layui-inline" style="float: right">
            <div class="layui-input-inline">
                <div class="layui-input-block">
                    <input type="text" th:name="roleName" th:id="roleName"  lay-verify="required" placeholder="请输入角色名称" autocomplete="off" class="layui-input"/>
                </div>
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
    </div>

    <div class="layui-form layui-form-pane" style="margin: 5px">
        <table id="demo" lay-filter="test"></table>
    </div>
</div>


<script type="text/html" id="createTime">
    {{# return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss') }}
</script>

<!--图片转换-->
<script type="text/html" id="userImg">
    <!--使用viewer插件进行渲染-->
    <ul class="showImg">
        {{#  layui.each(d.userImg.split(','), function(index, item){ }}
             <li><img th:src="@{${url} + '{{item}}' }" alt=""/></li>
        {{#  }); }}
    </ul>
</script>


<script type="text/html" id="barDemo">

  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <!--超级管理员不能删除-->
  {{# if (d.uid=== '1') { }}
    <!--uid等于1是系统默认的超级管理员，不显示删除按钮-->
  {{# } else { }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
  {{# } }}

</script>


<script th:inline="none">
    layui.use(['util', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.jquery,//加载jquery对象
            layer = layui.layer;

        //让层自适应iframe
        $('#add').on('click', function () {
            var index = layer.open({
                type: 2,
                content: '/bg/dicUser/toAdd',
                area: ['800px', '450px'],
                maxmin: true,
                end: function () {
                    location.reload();
                }
            });
            parent.layer.iframeAuto(index);
        });


        //第一个实例
        table.render({
            elem: '#demo'
            , url: '/bg/dicUser/findDicUserList' //数据接口
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
                }
            , limit: 10 //初始页条数
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {type: 'numbers', title: 'ID', width: 80}
                , {field: 'loginName', title: '登录名'}
                , {field: 'nickName', title: '昵称'}
                , {field: 'userImg', title: '头像', templet: '#userImg'}
                , {field: 'roleName', title: '角色名'}
                , {field: 'createTime', title: '注册时间', templet: '#createTime'}
                , {fixed: 'right', title: '操作栏', align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
            ,done : function () {
                $(".showImg").viewer();
            }
            , id: 'testReload' //重载标识
        });

        var active = {
            // 方法级渲染的重载 不需要 #
            reload: function () {
                //获取条件
                var roleName = $('#roleName').val();

                //执行重载 testReload 对应第一个实例中 id
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        roleName: roleName
                    }
                });
            }

            // 多选监控 获取checkStatus行数据
            // , dels: function () { //获取选中数据 demo 为table的id
            //     var checkStatus = table.checkStatus('testReload')
            //         , data = checkStatus.data;
            //     var userIds = [];
            //     data.forEach(function (item, index) {
            //         userIds.push(item.userId);
            //     });
            //     layer.confirm('真的删除行么', function (index) {
            //         $.ajax({
            //             url: '/manage/user/dels',
            //             type: 'post',
            //             dataType: 'json',
            //             data: {userIds: userIds.join(",")},//join 将数组组装成 1,2,3 的形式
            //             success: function (data) {
            //                 if (data.code == 200) {
            //                     layer.msg(data.msg, {icon: 1, time: 500}, function () {
            //                         $(".layui-laypage-btn").click();
            //                     });
            //                 } else {
            //                     layer.msg(data.msg, {icon: 1, time: 1000});
            //                 }
            //             }
            //         })
            //     });
            // }
            // , update: function () { //获取选中数据 demo 为table的id   data
            //     var checkStatus = table.checkStatus('testReload')
            //         , data = checkStatus.data;
            //     if (data.length != 1) {
            //         layer.msg("请选择一个操作");
            //         return false;
            //     }
            //     //data 获取的是数组,所以当修改的时候就要获取第一个数据
            //     var userId = data[0].userId;
            //     var index = layer.open({
            //         type: 2,
            //         content: '/manage/user/goEdit?userId=' + userId,
            //         area: ['800px', '450px'],
            //         maxmin: true,
            //         end: function () {
            //             location.reload();
            //         }
            //     });
            //     parent.layer.iframeAuto(index);
            // }
        };

        $('.layui-form .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'look') { //查看
                //do somehing
                layer.msg('的确很重要', {icon: 1, time: 500});
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除么', function (index) {
                    $.ajax({
                        url: '/bg/dicUser/del',
                        type: 'post',
                        dataType: 'json',
                        data: {uid: data.uid},
                        success: function (data) {
                            if (data.code == "200") {
                                layer.msg(data.msg, {icon: 1, time: 500}, function () {
                                    //列表页刷新当前页
                                    $(".layui-laypage-btn").click();
                                });
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 1000});
                            }
                        },
                        complete : function(xhr, status) {
                            //拦截器拦截没有权限跳转
                            // 通过xhr取得响应头
                            var REDIRECT = xhr.getResponseHeader("REDIRECT");
                            //如果响应头中包含 REDIRECT 则说明是拦截器返回的
                            if (REDIRECT == "REDIRECT")
                            {
                                document.location.href = xhr.getResponseHeader("CONTEXTPATH");
                            }
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                var index = layer.open({
                    type: 2,
                    content: '/bg/dicUser/toEdit?uid=' + data.uid,
                    area: ['800px', '450px'],
                    maxmin: true,
                    end: function () {
                        location.reload();
                    }
                });
                parent.layer.iframeAuto(index);
            } else if (layEvent === 'openImg') { //监听单元格
                //页面层-展示图片
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    area: ['450px', '450px'],
                    skin: 'layer-ext-myskin', //没有背景色
                    shadeClose: true,
                    content: '<img src="http://develop-kingsuper.oss-cn-hangzhou.aliyuncs.com/' + data.userImg + '" height="450px" width="450px" alt="加载失败"/>'
                });
            }
        });

        // var getIds = function () {
        //     var ids = [];
        //     var checkStatus = table.checkStatus('testReload')
        //         , data = checkStatus.data;
        //     $.each(data, function (index, item) {
        //         ids.push(item['userId'])
        //     });
        //     return ids;
        // }

    });
</script>
</body>
</html>
